<template>
    <div class="forgetModel">
        <van-dialog v-model="show" :title="statusTitle" confirmButtonColor="#075ebb" @cancel="goLogin" class="login-alert forget_alertBox"></van-dialog>
        <div class="forget_top">
            <van-icon name="arrow-left" class="forget_blackBtn" @click="$router.go(-1)"/>
            <h3>{{ $t("forget_password") }}</h3>
        </div>
        <div class="forget_content">
            <div class="forget_tips">
            <div>{{ $t("forget_tips1") }}</div>
        </div>
        <div class="forget_form">
                <div class="forget_formBox">
                    <label for="username">{{ $t("login_user_name") }}:</label>
                    <input
                        v-model.trim="username"
                        name="username"
                        :class="{
                            forget_form_text: true,
                            errorBox: isUserError
                        }"
                        :placeholder="$t('login_pls_name')"
                        @blur="usernameRule"
                    />
                    <span v-if="isUserErrorTip" class="errorTips">{{
                        $t("set_pwd_tips_one", { min: 6, max: 20 })
                    }}</span>
                </div>
                <div class="forget_formBox">
                    <label for="email">{{ $t("forget_email") }}:</label>
                    <input
                        v-model.trim="email"
                        name="email"
                        :class="{
                            forget_form_text: true,
                            errorBox: isEmailError
                        }"
                        :placeholder="$t('forget_tips2')"
                        @blur="emailRule"
                    />
                    <span v-if="isEmailErrorTip" class="errorTips">{{
                        $t("forget_tips4")
                    }}</span>
                </div>
                <div class="forget_formBox formCodeBox">
                    <label for="code">{{ $t("forget_code") }}:</label>
                    <input
                        v-model.trim="code"
                        name="code"
                        :class="{
                            forget_form_text: true,
                            errorBox: isCodeError
                        }"
                        :placeholder="$t('forget_tips3')"
                        @blur="codeRule"
                    />
                    <img
                        :src="captchaCode"
                        alt=""
                        class="codeImg"
                        @click="etCaptchaCode"
                    />
                </div>
                <div
                    style="margin: 16px; display: flex; justify-content: space-between"
                >
                    <van-button
                        block
                        type="info"
                        style="width: 45%; border-radius: 8px;"
                        v-debounce="checkRule"
                        >{{$t('sure')}}</van-button
                    >
                    <van-button
                        type="default"
                        @click="$router.push('/loginIndex')"
                        style="width: 45%; border-radius: 8px;"
                        >{{$t('cancel')}}</van-button
                    >
                </div>
        </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'forget_pwd',
    components: {},
    data() {
        return {
            show: false,
            statusTitle: '',
            username: '',
            isUserError: false,
            isUserErrorTip: false,
            email: '',
            isEmailError: false,
            isEmailErrorTip: false,
            code: '',
            isCodeError: false,
            isCodeErrorTip: false,
            uuid: '',
            captchaCode: ''
        };
    },
    methods: {
        checkRule() {
            this.usernameRule();
            this.emailRule();
            this.codeRule();
            if (!this.isUserError && !this.isEmailError && !this.isEmailError) {
                const ruleForm = {
                    usrSteUsrId: this.username,
                    usrEmail: this.email,
                    uuid: this.uuid,
                    code: this.code
                };
                this.$axios({
                    method: 'POST',
                    url: '/app/api/trainee/user/forget-pwd',
                    params: ruleForm,
                    timeout: 10000
                }).then(res => {
                    // 发送请求 根据返回的code判断情况提示
                    if (res.data.errCode === 'success') {
                        this.statusTitle = this.$t('forget_tips6');
                        this.show = true;
                    };
                });
            }
            this.etCaptchaCode();
        },
        usernameRule() {
            if (!this.username) {
                this.isUserError = true;
            } else if (this.username.length < 6 || this.username.length > 20) {
                this.isUserError = this.isUserErrorTip = true;
            } else {
                this.isUserError = this.isUserErrorTip = false;
            }
        },
        emailRule() {
            if (!this.email) {
                this.isEmailError = true;
            } else if (
                !/^[a-zA-Z0-9]+([-_\\.][a-zA-Z0-9]+)*@[a-zA-Z0-9]+([-_.][a-zA-Z0-9]+)*\.[a-z]{2,}$/.test(
                    this.email
                )
            ) {
                this.isEmailError = this.isEmailErrorTip = true;
            } else {
                this.isEmailError = this.isEmailErrorTip = false;
            }
        },
        codeRule() {
            if (!this.code) this.isCodeError = true;
            else this.isCodeError = false;
        },
        etCaptchaCode() {
            this.$axios({
                method: 'GET',
                url: '/app/api/captcha',
                timeout: 5000
            }).then(({ data: res }) => {
                this.uuid = res.uuid;
                this.captchaCode = 'data:image/png;base64,' + res.code;
            }).catch(res => {});
        },
        goLogin() {
            if (this.statusTitle === this.$t('forget_tips6')) this.$router.push('/loginIndex');
        }
    },
    mounted() {
        this.etCaptchaCode();
    }
};
</script>

<style scoped lang="less">
.forgetModel {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.forget_content {
    flex: 1;
    padding: 10px;
    background-color: #f7f7f7;
}
.forget_top {
    position: relative;
    height: 55px;
    line-height: 55px;
    text-align: center;
    background: #fff;
}
.forget_blackBtn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 10px;
    font-size: 23px;
    width: 30px;
    height: 30px;
    line-height: 30px;
}
.forget_top h3 {
    font-weight: 400;
    font-size: 18px;
    color: #333;
}
.forget_top div {
    line-height: 31px;
    color: #606266;
}
.forget_tips {
    display: flex;
    margin: 20px 0;
    color: #606266;
}
.forget_formBox {
    display: flex;
    position: relative;
    flex-direction: column;
    padding: 0 0 20px 5px;
}
.forget_formBox label {
    color: #000;
}
.forget_form_text {
    height: 35px;
    font-size: 14px;
    color: #333333;
    resize: none;
    border: none;
    background: none;
    outline: none;
    border-bottom: 1px solid #d8d8d8;
}
.formCodeBox {
    position: relative;
}
.codeImg {
    position: absolute;
    top: 7px;
    right: 10px;
    width: 107px;
    height: 40px;
}
.errorBox {
    border-color: #c40202 !important;
}
.errorBox::-webkit-input-placeholder {
    color: #c40202 !important;
}
.errorBox:-moz-placeholder {
    color: #c40202 !important;
}
.errorBox::-moz-placeholder {
    color: #c40202 !important;
}
.errorBox:-ms-input-placeholder {
    color: #c40202 !important;
}
.errorTips {
    position: absolute;
    left: 5px;
    bottom: 2px;
    color: #c40202;
}
/deep/.van-button--info{
    background-color: #075ebb;
    border: 1px solid #075ebb;
}
</style>
